<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="css/header.css">
	<link rel="stylesheet" type="text/css" href="./css/topsearch.css">
    <link rel="stylesheet" type="text/css" href="./css/footer.css">
    <link rel="stylesheet" type="text/css" href="./css/detail.css">
    <script src="./jquery/jquery-1.11.2.min.js"></script>
    <script src="./bootstrap/js/bootstrap.js"></script>
    <script src="./js/head.js"></script>
    <!-- <script src="./js/topsearch.js"></script> -->
    <script src="./js/detail.js"></script>
</head>
<body>
	<!-- search start -->
    <div class="top">  
        <header class="container head">
            <div class="row">
                <div class="col-sm-10">
                    <ul class="nav nav-pills">
                        <li role="presentation"><a href="#">aDaily Deals</a></li>
                        <li role="presentation"><a href="./sell.html">Sell</a></li>
                        <li role="presentation"><a href="#">Help & Contact</a></li>
                    </ul>
                </div>
                <div class="col-sm-2 topright">
                    <ul class="nav nav-pills"  style="width: 188px">
                        <li role="presentation" class="dropdown init" >
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                              My eBay<span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                              <li><span class="glyphicon glyphicon-user"></span> <a href="./login_regist.html" style="display: inline-block">login</a></li>
                              <li><span class="glyphicon glyphicon-user"></span> <a href="./watchlist.html" style="display: inline-block">watchlist</a></li>
                            </ul>
                        </li>
                        <li role="presentation" class="dropdown logined" style="display: none">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                              Hi <i class="username"></i><span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                              <li><span class="glyphicon glyphicon-user"></span> <a href="./watchlist.html" style="display: inline-block">Settings</a></li>
                              <li> <span class="glyphicon glyphicon-log-out"></span><a href="javascript:void(0)" style="display: inline-block" onclick="logout()">Logout</a></li>
                            </ul>
                        </li>
                        <li role="presentation"><a href="#"><span class="glyphicon glyphicon-bell"></span></a></li>
                        <li role="presentation"><a href="#"> <span class="glyphicon glyphicon-shopping-cart"></span></a></li>
                    </ul>
                </div>
            </div>
        </header>
    </div>
    <div class="row search">
        <div class="col-sm-1 col-sm-offset-1">
            <img src="image/logo.png">
        </div>
        <div class="col-sm-1" style="width:120px">
            <ul class="nav navbar-nav"  style="margin-top:-5px">
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Categary <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </li>
            </ul>
        </div>
        <div class="col-sm-5">
            <form class="form-inline">
                <div class="form-group">
                    <div class="input-group" style="display: flex;">
                        <input type="text" class="form-control" id="exampleInputAmount" style="width:420px">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width:100px">Global <span class="caret"></span></button>
                            <ul class="dropdown-menu dropdown-menu-right">
                              <li><a href="#">America</a></li>
                              <li><a href="#">Great Britain</a></li>
                              <li><a href="#">Deutschland</a></li>
                              <li role="separator" class="divider"></li>
                              <li><a href="#">Global</a></li>
                              <li><a href="#">Europe</a></li>
                            </ul>
                        </div><!-- /btn-group -->
                    </div>  
                </div>
            </form>
        </div>
        <div class="col-sm-2">
            <button type="button" class="btn btn-primary sub" style="width:150px;margin-left: 45px">Search</button>
        </div>
        <div class="col-sm-1" style="margin-top: 5px;margin-left: 20px">Advanced</div>
    </div>
    <!-- search end -->
	 <ol class="breadcrumb navtop" style="font-size: 110%;margin-left:20px ">
        <li>
            <a href="#">Collectibles</a>
        </li>
        <li>
            <a href="#">Postcards</a>
        </li>
        <li class="active">China</li>
    </ol>
    <div class="container">
    	<div class="row">
    		<!-- <div class="col-sm-3 left-pic"> -->
    		<div class="top_left col-sm-4">
                <div class="image_contanier" >
                    <a href="" class="aimg"><img src="./image/s-l225.jpg" class="top-img" style="width:100%;height:100%"></a>
                </div>
                <div class="mini">
                   <img src="./image/s-l226.jpg" style="height: 100px">
                   <img src="./image/s-l201.jpg" style="height: 100px">
                </div>
    		</div>
    		<div class="col-sm-8">
                <p class="title"></p>  
                <p class="subtime"></p> 
                <div class=" detail">
                    <div class="detail_left">
                        <!-- 阴影框 -->
                        <div class="shadow ">
                            <form class="shadow_top">
                                <div class="current">
                                    Current bid:
                                </div>
                                <div class="content">
                                    <div>
                                        <strong><span class="curr"></span> <span class="price"></span></strong>
                                    </div>
                                    <p>Approximately
                                        <span class="text-muted">RMB 86.37</span>
                                    </p>
                                    <input type="text" class="form-control">
                                    <p>Enter GBP 10.50 or more</p>
                                </div>
                                <div>
                                    <div>
                                        <a href="">1 bid</a>
                                    </div>
                                    <input type="button" value="Place bid" class="btn btn-primary place">
                                    <div class="watch">
                                       <a href='javascript:void(0)' id='watch' onclick="watch()">Watch?</a>
                                       <a href='javascript:void(0)' id='watched' onclick="watched()" style="display: none">Watched</a>
                                        
                                    </div>
                                </div>
                            </form>
                            <div class="bottom_cell pull-left">
                                <span class="text-success" style="font-size: 120%">100% positive</span>
                                <br>
                                <span>Feedback</span>
                            </div>
                            <div class="bottom_cell pull-left">
                                <span class="text-success count" style="font-size: 120%">0</span>
                                <br>
                                <span>Watchers</span>
                            </div>
                        </div>
                        <!-- 下部详情 -->
                        <div class="bottom_text">
                            <div class="more pull-right"><a href="">More detail</a></div>
                            <div class="list">
                                <div class="list_left">Shipping:</div>
                                <div>
                                    <b>GBP 2.49(approx.</b>
                                    <span> RMB 21.50</span>)
                                    <br>
                                    <span>Item location:United Kingdom</span>
                                    <br>
                                    <span>Ship to:Worldwide</span>
                                </div>
                            </div>
                            <div class="list">
                                <div class="list_left">Delivery:</div>
                                <div>             
                                    <span> Estimated between May 29 and Jun 20.</span>
                                </div>
                            </div>
                            <div class="list">
                                <div class="list_left">Payment:</div>
                                <div class="payment">
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 右侧卖家 -->
                    <div class="seller ">
                        <p class="text-muted">
                            <span class="text-primary">nononsersenige</span> ( 25186 ) </p>
                        <p>
                            <a href="" class="text-muted">
                                <span class="text-primary glyphicon glyphicon-heart"></span> Save seller</a>
                        </p>
                        <p>
                            <a href="" class="text-muted">
                                <span class="text-primary glyphicon glyphicon-envelope"></span> Contact seller</a>
                        </p>
                        <p>
                            <a href="" class="text-muted">
                                <span class="text-primary glyphicon glyphicon-log-in"></span> Visit store</a>
                        </p>
                        <img src="./image/medal.png" alt="">
                    </div>
                </div>   
            </div>
    	</div>
         <!-- 富文本内容 -->
        <div class="richtext">
        
        </div>
    </div>
     <footer class="footer ">
          <div>
            <a href="#"> <span class="text-muted">About eBay</span></a>
            <a href="#"> <span class="text-muted">Announcements</span></a>
            <a href="#"> <span class="text-muted">Security Center</span></a>
            <a href="#"><span class="text-muted">Resolution Center</span></a>
            <a href="#"> <span class="text-muted">Seller Information Center</span></a>
            <a href="#"> <span class="text-muted">Polices</span></a>
            <a href="#"><span class="text-muted">Affiliates</span></a>
            <a href="#"><span class="text-muted">Help & Contact</span></a>
            <p class="copy">Copyright&copy;1995-2018 eBay Inc.All Right Reserved.
              <a class="text-muted" href="#"> <u>Accessibility</u></a>,
              <a class="text-muted" href="#"><u> User agreement</u>   </a>,
              <a class="text-muted" href="#"><u>Privacty</u> </a>,
              <a class="text-muted" href="#"><u>Cookies</u>     </a>
                  and
              <a class="text-muted" href="#"><u>AdChoice</u> </a>
              <span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="right" title="Tooltip on right"></span>
            </p>
          </div>
    </footer>
</body>
</html>